<template>
  <div class="app-container">
    <SideBar>
      <div
        slot="left"
        class="left-content"
      >
        <el-input
          placeholder="请输入内容"
          v-model="searchKey"
          class="input-with-select"
          size="small"
          @keyup.enter.native="handleFilter"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="handleFilter"
          ></i>
        </el-input>
        <div class="tree-container" v-loading="treeLoading">
          <el-tree
            ref="tree"
            node-key="id"
            :data="treeData"
            :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys"
            :filter-node-method="handleFilterNode"
            @node-click="handleNodeClick"
          >
            <span
              slot-scope="{ node, data }"
              :class="{'custom-tree-node':true, 'active-node':activeNode&&activeNode.id===data.id }"
            >
              <span v-if="data.nodeType===node_type.GROUP">
                <svg-icon
                  v-show="node.expanded"
                  icon-class="folder-open"
                  class-name="folder-icon"
                />
                <svg-icon
                  v-show="!node.expanded"
                  icon-class="folder"
                  class-name="folder-icon"
                />
              </span>
              <span class="el-tree-node__label">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <Group
        v-show="activeNode.nodeType===node_type.GROUP"
        :data="activeNode"
        :canEdit="false"
      />
      <Result
        v-show="activeNode.nodeType===node_type.TEMPLATE"
        :data="activeNode"
      />
    </SideBar>
  </div>
</template>

<script>
import Group from '../template/group.vue'
import Result from './result.vue'
import { getImportingTree } from '@/api/import/template'
import { NODE_TYPE } from '../enum'
import SideBar from '@/components/SideBar'
export default {
  name: 'Importing',
  components: { Group, Result, SideBar },
  data() {
    return {
      searchKey: '',
      activeNode: {},
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandedKeys:[],
      treeLoading: false
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    },
    node_type() {
      return NODE_TYPE
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    getTreeData() {
      this.treeLoading = true
      getImportingTree().then((res) => {
        // 设置默认展开
        this.defaultExpandedKeys =  res.data?.length ? [res.data[0].id] : []

        this.treeData = res.data || []
        this.treeLoading = false
      }).catch(()=>{
        this.treeLoading = false
      })
    },
    handleFilter() {
      this.$refs.tree.filter(this.searchKey)
    },
    handleFilterNode(value, data, node) {
      return data.name.includes(value)
    },
    handleNodeClick(data) {
      this.activeNode = { ...data }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/element-variables";
.app-container {
  .left-content {
    width: 100%;
    height: 100%;
  }
  .tree-container {
    margin-top: 10px;
    height: calc(100% - 32px - 10px);
    // overflow: auto;
  }
  .folder-icon {
    margin-right: 5px;
    color: $--color-primary;
  }
  .active-node {
    color: $--color-primary;
  }
}
</style>